<!-- 编辑功能模板 -->
<template>
  <div class="field">
    <div class="fieldTitle">
      <b v-show="theData.null">*</b>{{theData.name}}
    </div>
    <!-- 常规组件 -->
    <div class="fieldInput" v-if="type == 'text'">
      <el-input type="text" 
        v-model="dataVal"        
        :placeholder="theData.allow ? '请输入#'+theData.name+'#' : ''" 
        :disabled="!theData.allow || actionState > 0" 
        :maxlength="theData.maxLength"
        :style="'border-color:' + borderColor"
        @input="updateValue"></el-input>
    </div>
    <div class="fieldInput2" v-else-if="type == 'textarea'">
      <el-input type="textarea"
        v-model="dataVal" 
        @input="updateValue" 
        :placeholder="theData.allow ?'请输入#'+theData.name+'#':''" 
        :disabled="!theData.allow || actionState > 0" 
        :maxlength="theData.maxLength"></el-input>
    </div>
    <div class="fieldInput" v-else-if="type == 'dataSelectSub'">
      <el-input 
        type="text" 
        v-model="dataVal" 
        style="cursor:wait;" 
        disabled></el-input>
    </div>
    <div class="fieldInput" v-else-if="type == 'int' || type == 'float'">
      <el-input type="number"
        v-model="dataVal" 
        @input="updateValue" 
        :placeholder="theData.allow?'请输入#'+theData.name+'#':''" 
        :disabled="!theData.allow || actionState > 0" 
        :maxLength="theData.maxLength"></el-input>
    </div>
    <div class="fieldInput" v-else-if="type == 'radio'">
      <el-switch
        v-model="isChecked"
        :active-value="true"
        :inactive-value="false"
        active-color="#00A578"
        inactive-color="#BFBFBF"
        @change="valueChange"
      ></el-switch>
    </div>
    <!-- 日期组件 -->
    <div class="fieldInput" v-else-if="type.trim().toLowerCase().includes('datetime')">
      <!-- 日期选择范围 -->
      <el-date-picker
        v-if="type == 'dateTimeFrame'"
        v-model="dataVal"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        :disabled="!theData.allow || actionState > 0"
        start-placeholder="从"
        end-placeholder="到"
        @change="dateChange"
      ></el-date-picker>
      <!-- 日期选项 -->
      <el-date-picker
        v-else
        v-model="dataVal"
        type="date"
        :placeholder="theData.allow ? '选择#'+theData.name+'#' : ''"
        :disabled="!theData.allow || actionState > 0"
        :value-format="dateFormat"
        @change="dateChange"
      ></el-date-picker>
    </div>
    <!-- 普通下拉选择组件 -->
    <div class="fieldInput" v-else-if="type == 'select'">
      <el-select
        v-model="dataVal"
        :disabled="!theData.allow || actionState > 0"
        @change="valueChange"
      >
        <el-option
          v-for="item in selectItems"
          :label="item.title"
          :value="item.value"          
          :key="item.title"
        ></el-option>
      </el-select>
    </div>
    <!-- 类别下拉选择组件 -->
    <div class="fieldInput" v-else-if="type == 'baseSelect'">
      <el-select
        v-model="dataVal"
        class="dataSelect"
        :disabled="!theData.allow || actionState > 0"
        @change="valueChange"
      >
        <el-option
          v-for="item in selectItems"
          :label="item.title"
          :value="item.value"
          :key="item.title"
        ></el-option>
      </el-select>
      <button 
        :class="(!theData.allow || actionState > 0) ? 'butNot' : 'butAdd'"
        :style="(!theData.allow || actionState > 0) ? 'cursor: default;': ''"
        @click="openDataWindow" >
        <img :src="(!theData.allow || actionState > 0) ? require('../assets/img/StockAllotOrder_C.png') : require('../assets/img/StockAllotOrder_S.png')" />补充
      </button>
    </div>
    <!-- 数据下拉选择组件+小弹窗 -->
    <div class="fieldInput" v-else-if="type == 'dataSelect'">
      <el-select
        v-model="dataVal"
        class="dataSelect"
        filterable
        default-first-option
        placeholder="请输入关键词，可快速过滤选项"
        :loading="loading"        
        :value-key="theData.returnKey"
        :disabled="!theData.allow || actionState > 0" 
        @focus="focusSearchData"
        @blur="blurSearchData"
        @visible-change="visibleChange"
        @change="valueChange"
      >
        <el-option
          v-for="item in selectItems"
          :label="item.name"
          :value="item.id"
          :key="item.id"
        ></el-option>
      </el-select>
      <button
        :class="(!theData.allow || actionState > 0) ? 'butNot' : 'butAdd'"        
        :style="(!theData.allow || actionState > 0) ? 'cursor: default;': ''"
        @click="openDataWindow" >
        <img :src="(!theData.allow || actionState > 0) ? require('../assets/img/SystemManage_C.png') : require('../assets/img/SystemManage_S.png')" />浏览
      </button>
    </div>
  </div>
</template>
<script>
import selectData from "./selectData.vue";
import typeData from "./typeData.vue";
export default {
  data() {
    return {
      type:'',
      dataVal:'',
      selectVal: 0,
      isChecked: false, //是否选中
      dateFormat:'yyyy-MM-dd', //日期格式
      selectItems:[], //下拉选择
      loading:false,
      borderColor:'#DDD',
      quickUrl:'',
      quickValue:'',
      showOption: true,
      dataId:0
    };
  },
  components:{
    selectData,
    typeData
  },
  props:{
    theData:{
      type:Object,
      required:true
    },
    theOrg:{
      type:Number,
      required:true
    },
    actionState: {
      type: Number,
      default: () => {
        return 0;
      }
    }
  },
  created() { //初始处理数据
    this.type = this.theData.type;    
    if(this.type === 'radio'){
      let val = this.theData.selectValue;
      this.selectVal = val;
      this.isChecked = val === '1';
    }else if(this.type.toLowerCase().includes('select')){
      this.selectVal = this.theData.selectValue;
    }
    this.dataVal = this.theData.value;
    this.selectItems = this.theData.selectItems;
    this.quickUrl = this.theData.defaultValue;
    this.type.toLowerCase().includes("datetime")
      this.checkTimeFormat();
  },
  methods: {
    //设置日期组件显示格式
    checkTimeFormat(){
      let last = this.type.slice(-1).toUpperCase();
      switch(last){
        case "S": this.dateFormat = 'yyyy-MM-dd HH:mm:ss'; break;
        case "M": this.dateFormat = 'yyyy-MM'; break;
        case "T": this.dateFormat = 'HH:mm'; break;
        default: this.dateFormat = 'yyyy-MM-dd'; break;
      }
    },
    //失去焦点时 下拉快速查询
    blurSearchData(e) {
      //this.loading = true;
      let val = e.target.value ? e.target.value.trim() : '';
      if(val != this.quickValue){
        setTimeout(() => { //延迟下拉快速搜索
          this.getQuickData(val);
        },500);
      }
    },
    //获取焦点时 下拉快速查询
    focusSearchData(e){
      //首次获取数据并显示
      if(this.showOption){
        this.showOption = false;
        this.getQuickData('');
      }
    },
    //dataSelect快捷查询下拉数据
    async getQuickData(val){ //加载下拉快速搜索
      if (this.quickUrl != null && this.quickUrl.length > 0) {
        let theVal = val != null ? val.trim() : '';
        this.quickValue = theVal;
        let toUrl = this.changeUrl(this.quickUrl+theVal);      
        let { data: res } = await this.$http.get(toUrl);
        if (res.result) {
          //this.loading = false;
          this.selectItems = [];
          this.selectItems = res.obj;
        } else {
          this.clewMsg(res.type,res.mes);
        }
      }
    },

    // 下拉隐藏和显示的时候触发事件
    async visibleChange(k) {
      // if(!k){
      //   this.selectItems = [];        
      // }
    },
    async loadSelect(val){
      let theVal = val ? val.trim() : '';
      this.dataVal = theVal;
      console.log('select value:>> ' + theVal);
      if(this.quickUrl != null && this.quickUrl.length > 0){
        let toUrl = this.changeUrl(this.quickUrl + theVal);
        let { data: res } = await this.$http.get(toUrl);
        if (res.result){
          this.selectItems = res.obj;
        }else{
          this.clewMsg(res.type,res.msg);
        }
      }
    },
    updateValue(val){
      this.dataVal = val;
      var theVal = this.dataVal;
      if(this.type == 'int'){
        theVal = theVal.replace(/[^0-9]/g,'');
      }else if(this.type == 'float'){
        theVal = theVal.replace(/[^0-9.]/g,'');
      }
      var theParam = this.theData.paramName;
      if(this.type.toLowerCase().includes("select") || this.type.toLowerCase() == 'radio'){
        theParam = this.theData.actionValue;
      }
      let data = {
        value: val,
        param: theParam
      };
      this.$parent.updateChangeVal(data);
    },    
    dateChange(val){
      var theParam = this.theData.paramName;
      let data = {
        value: val,
        param: theParam
      };
      this.$parent.updateChangeVal(data);
    },
    valueChange(val){
      var theParam = this.theData.actionValue;
      let data = {        
        param: theParam
      };
      if(this.type === 'radio'){
        this.selectVal = val ? '1' : '0';
        this.isChecked = val;
        data.value = this.selectVal;
      }else if(this.type.toLowerCase().includes('select')){
        this.selectVal = val;
        data.value = val.toString();

      }
      this.$parent.updateChangeVal(data);
    },
    openBaseWindow(){
      if(this.theData.allow && this.actionState == 0){
        let postUrl = this.changeUrl(this.theData.actionUrl);
        console.log("openWinUrl:" + postUrl);
        let data = {
          win: 'base',
          type: 'none',
          openUrl: postUrl
        };
        this.$emit('openWinUrl', data);
      }      
    },
    openDataWindow(){
      console.log('点击了');
      this.clewMsg(2,'功能升级中');
      if(!this.theData.allow || this.actionState > 0){

      }
      // if(this.theData.allow && this.actionState == 0){
      //   let postUrl = this.changeUrl(this.theData.actionUrl);
      //   console.log("openWinUrl:" + postUrl);
      //   let data = {
      //     win: 'data',
      //     type: 'select',
      //     openUrl: postUrl
      //   };
      //   this.$emit('openWinUrl', data);
      // }
    },
    changeUrl(url){
      if(/\?|&/.test(url)){
        url += '&orgId=' + this.theOrg;
      }else{
        url += '?orgId=' + this.theOrg;
      }
      return url;
    },
    clewMsg(type,mes){
      var theType = '';
      switch(type) {
        case 1: theType = 'success';
        case 3: theType = 'error';
        default: theType = 'warning';
      }
      this.$message({
        message: mes,
        type: theType
      });
    }
  }
};
</script>
<style>
   .field{
    float: left;
    width: calc(100% - 20px);
    height: 40px;
    padding: 5px 10px;
   }   
   .fieldTitle{
    float: left;
    width: 90px;
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
    font-size: 13px;
    color: #555;
    cursor: default;
    justify-content: center;
    align-items: right;
   }
   .fieldTitle b{
    font-size: 14px;
    color: #F5222D;
   }     
   .butAdd{
    padding: 5px 4px;
    width: 60px;
    height: 36px;
    font-size: 14px;
    color: #FFF;
    background: #00A578;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
  }
  .butNot{
    padding: 5px 4px;
    width: 60px;
    height: 36px;
    font-size: 14px;
    color: #666;
    background: #EEE;
    border: none;
    border-radius: 4px;
    cursor: not-allowed;
    align-items: center;
    box-shadow: 0 0 1px 1px rgba(180,180,180,0.15);
  }
  .butAdd img,.butNot img{
    height: 14px;
    width: auto;
    margin-right: 2px;
  }   
</style>
<style lang="less" scoped>
  .fieldInput{
    float: left;
    height: 40px;
    width: calc(100% - 100px);
    text-align: left;
    align-items: center;    
    /deep/.el-input__inner:hover{
      border: solid 1px #00A578;
      box-shadow: 0 1px 2px 1px rgba(0,160,120,0.15);
    }
    /deep/.el-input__inner[type='number']{
      text-align: right;
    }
    /deep/.el-switch{
      margin: 10px 0 0 5px;
    }
   }
   .fieldInput2{
    float: left;
    line-height: 40px;
    width: calc(100% - 100px);
    text-align: left;
    align-items: center;
   }
   .el-textarea{
    /deep/.el-textarea__inner{
      width: calc(100%);
      height: 25px;
      line-height: 25px;
      border: solid 1px #DDD;
      padding: 3px 10px;
      font-size: 14px;
      color: #222;
      border-radius: 4px;
    }
    /deep/.el-textarea__inner:hover{
      border: solid 1px #00A578;
      box-shadow: 0 1px 2px 1px rgba(0,160,120,0.15);
    }
   }
   .el-input{
    /* 文本 */
    /deep/.el-input__inner{
      width: calc(100% - 2px);
      height: 40px;
      line-height: 40px;
      border: solid 1px #DDD;
      padding: 2px 10px;
      font-size: 14px;
      color: #222;
      border-radius: 4px;
    }
   }
   .el-date-editor{
    width: 100% !important;
    height: 40px !important;  
     /deep/.el-input__inner{
      width: 100%;
      padding-left: 40px;
    }
   }
   .el-select{
    width: 100%;
    /deep/.el-input__inner{
      width: calc(100% - 2px);
      height: 38px;
      line-height: 38px;
      border: solid 1px #DDD;
      padding: 4px 10px;
      font-size: 14px;
      color: #222;
      border-radius: 4px;
    }
   }
   .dataSelect{
    width: calc(100% - 68px); 
    margin-right: 5px;
   }
   .el-checkbox{
    /deep/.el-checkbox__input{
      width: 30px;
      height: 30px;
      font-size: 30px;
    }
   }
</style>
